<template>
  <div class="page-warp">
    <div class="mapwrap">
      <!-- <ItemWrap v-if="showData" :style="{ left: offsetX, top: offsetY }" style="height: 305px; width: 620px"
        class="dialog" :title="mapTitle" @click.native.stop="isMapClick = false">
      
    </ItemWrap> -->
      <ItemWrap v-if="showChat" :style="{ left: offsetX, top: offsetY }" style="height: 630px; width: 1000px"
        class="dialog" :title="title" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showChat = false; showChatQt = false;">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <div class="TanDj">
          <!-- <div class="TanTitle"></div> -->
          <div class="TanViewTop TanContent">
            <DjTanTopLeft />
            <DjTanTopCenter />
            <DjTanTopRight />
          </div>
          <div class="TanViewBottom TanContent">
            <DjTanBottomLeft />
            <DjTanBottomCenter />
            <DjTanBottomRight />
          </div>
        </div>
      </ItemWrap>
      <ItemWrap v-if="showChatQt" :style="{ left: offsetX, top: offsetY }" style="height: 400px; width: 1000px"
        class="dialog" :title="title" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showChat = false; showChatQt = false;">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <div class="TanQt">
          <!-- <div class="TanTitle"></div> -->
          <div class="tanView">
            <QtTanLeft />
            <QtTanCenter />
            <QtTanRight />
          </div>
        </div>
      </ItemWrap>

    </div>

    <!-- <div class="topContent">
      <div class="topView topView1" @click="showChatFun('Dj')">
        <div class="topIcon"></div>
        <div class="topTitle">大集物流港</div>
      </div>
      <div class="topView topView2" @click="showChatFun('Qt', '兰华物流港')">
        <div class="topIcon"></div>
        <div class="topTitle">兰华物流港</div>
      </div>
      <div class="topView topView3" @click="showChatFun('Qt', '华苑物流港')">
        <div class="topIcon"></div>
        <div class="topTitle">华苑物流港</div>
      </div>
      <div class="topView topView4" @click="showChatFun('Qt', '华丰物流港')">
        <div class="topIcon"></div>
        <div class="topTitle">华丰物流港</div>
      </div>
      <div class="topView topView5" @click="showChatFun('Qt', '华田物流港')">
        <div class="topIcon"></div>
        <div class="topTitle">华田物流港</div>
      </div>
    </div> -->
  </div>
</template>

<script>
import DjTanTopLeft from './dj-top-left.vue';
import DjTanTopCenter from './dj-top-center.vue';
import DjTanTopRight from './dj-top-right.vue';
import DjTanBottomLeft from './dj-bottom-left.vue';
import DjTanBottomCenter from './dj-bottom-center.vue';
import DjTanBottomRight from './dj-bottom-right.vue'
import QtTanLeft from './qt-left.vue';
import QtTanCenter from './qt-center.vue';
import QtTanRight from './qt-right.vue'
export default {
  name: 'PackLTIndex',
  components: {
    DjTanTopLeft,
    DjTanTopCenter,
    DjTanTopRight,
    DjTanBottomLeft,
    DjTanBottomCenter,
    DjTanBottomRight,
    QtTanLeft,
    QtTanCenter,
    QtTanRight,
  },
  computed: {
    currentMarker() {
      return this.$store.state.setting.currentMarker;
    }
  },
  watch: {
    currentMarker: {
      handler(newVal, oldVal) {
        if (newVal && newVal.id && newVal.id.length > 0) {
          this.title = newVal.label;
          // console.log("🚀 ~ handler ~ newVal.label:", newVal.label, newVal.label.includes('大集'))
          if (newVal.label.includes('大集')) {
            console.log("🚀 ~ handler ~ newVal:", newVal)
            this.showChat = true;
            this.showChatQt = false;
          } else {
            this.showChatQt = true;
            this.showChat = false;
          }
        }
      },
      deep: true
    }
  },
  data() {
    return {
      isMapClick: false,
      showChat: false,
      showChatQt: false,
      title: '',
      offsetX: '40%',
      offsetY: '120px'
    };
  },
  created() { },
  mounted() { },
  beforeDestroy() { },
  methods: {
    chartClick(params) {
      // 这里处理你的点击逻辑
      this.$emit('chartClick', params);
    },
    showChatFun(text, title) {

      if (text == 'Dj') {
        this.showChat = true
      } else if (text == 'Qt') {
        this.title = title;
        this.showChatQt = true
      }

    },
  },
};
</script>

<style lang="scss" scoped>
.mapwrap {
  margin-top: -20px;
  margin-bottom: -50px;
  height: 580px;
  width: 100%;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  // border: 1px solid red;

  .close {
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
  }

  .dialog {
    width: 400px;
    height: 200px;
    position: absolute;
    z-index: 999;
  }
}

.page-warp {
  margin: 60px auto;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  // border: 1px solid red;

  // 中间
  .topView1 {
    top: 180px;
    left: 1480px;
  }

  .topView2 {
    top: 400px;
    left: 1850px;
  }

  .topView3 {
    top: 335px;
    left: 2220px;
  }

  .topView4 {
    top: 200px;
    left: 2480px;
  }

  .topView5 {
    top: 100px;
    left: 2680px;
  }

  .topView {
    position: absolute;
    cursor: pointer;

    .topIcon {
      width: 40px;
      height: 36px;
      background: url('../../../assets/img/launch/home/topIcon.png') no-repeat center;
      background-size: 40px 36px;
      margin-left: 25px;
      margin-bottom: 5px;
    }

    .topTitle {
      width: 90px;
      line-height: 28px;
      height: 28px;
      text-align: center;
      // padding: 6px;
      background-color: rgba(255, 255, 255, 0.2);
      color: #fff;
    }
  }

  .TanDj {
    position: absolute;
    top: 0;
    z-index: 999;
    // top: 120px;
    // width: 1100px;
    // height: 680px;
    // background: linear-gradient(180deg, #031436 0%, #09192E 100%), radial-gradient(82% 15% at 50% 100%, rgba(39, 115, 255, 0.1) 0%, rgba(39, 115, 255, 0) 100%), radial-gradient(47% 3% at 50% 100%, rgba(39, 115, 255, 0.2) 0%, rgba(39, 115, 255, 0) 100%), radial-gradient(34% 1% at 50% 100%, rgba(39, 115, 255, 0.5) 0%, rgba(39, 115, 255, 0) 100%);
    // box-shadow: 0px 1px 0px 0px #26A0F2;
    // border-radius: 20px;
    padding-top: 40px;

    // .TanTitle {
    //   width: 165px;
    //   height: 27px;
    //   background: url('../../../assets/img/launch/home/tanTitle1.png') no-repeat center;
    //   background-size: 165px 27px;
    //   margin: 51px auto auto 65px;
    // }

    .TanContent {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin: 25px 20px auto 20px;
    }

    .TanViewBottom {}
  }

  .TanQt {
    position: absolute;
    z-index: 999;
    // top: 160px;
    // width: 1100px;
    // height: 460px;
    // background: linear-gradient(180deg, #031436 0%, #09192E 100%), radial-gradient(82% 15% at 50% 100%, rgba(39, 115, 255, 0.1) 0%, rgba(39, 115, 255, 0) 100%), radial-gradient(47% 3% at 50% 100%, rgba(39, 115, 255, 0.2) 0%, rgba(39, 115, 255, 0) 100%), radial-gradient(34% 1% at 50% 100%, rgba(39, 115, 255, 0.5) 0%, rgba(39, 115, 255, 0) 100%);
    // box-shadow: 0px 1px 0px 0px #26A0F2;
    // border-radius: 20px;

    // .TanTitle {
    //   width: 165px;
    //   height: 27px;
    //   background: url('../../../assets/img/launch/home/tanTitle2.png') no-repeat center;
    //   background-size: 165px 27px;
    //   margin: 51px auto auto 65px;
    // }

    .tanView {
      width: 100%;
      margin-left: 35px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 23px;
      // border: 1px solid red;
      margin-left: 25px;
    }
  }
}
</style>